Premium Analytics: add React Query Devtools dev-only widget#50002
Conversation
gate widget types per request before REST list and import map
replace inline provider devtools with a non-production widget
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Code Coverage SummaryCoverage changed in 2 files.
1 file is newly checked for coverage.
|
cover functions with ::func / CoversFunction, not CoversClass
shorten prose; document the wp_get_environment_type production default
| } | ||
|
|
||
| // Types that must never reach a production dashboard. | ||
| $non_production_only = array( 'jpa/react-query-dev-tool' ); |
There was a problem hiding this comment.
This is a hardcoded list. Maybe we can define a dev category and filter the list by it.
wrap title in __(), link: data dep, declare react
widget.json is the canonical source read by the build
chihsuan
left a comment
There was a problem hiding this comment.
Nice, this looks good overall. @retrofox 👍 One test gap I'd close before merge, plus a couple of non-blocking follow-ups:
One concrete nit: the non-production pass-through branch of filter_widget_types_by_environment() isn't covered. Can we add a sibling test that forces a non-production env?
A couple of follow-up thoughts, both non-blocking:
Two ideas feel worth pulling from #50031
- We can consider gating at registration rather than on read. An unavailable widget never enters the registry, so every consumer stays correct without having to remember the filtered accessor.
- Expressing the rule declaratively per widget instead of a central hardcoded name list, so this env gate becomes just one more requirement type
Upstream eventually? You've probably already got an eye on this but just curious whether the plan is to push this kind of gating upstream once it settles.🙂
|
|
||
| /** | ||
| * In production, developer-only widget types are dropped while the rest | ||
| * pass through untouched. |
There was a problem hiding this comment.
minor: Should we also add a test case for non-production environment type?
Expose registry + runtime widget-type filters in core; gate the dev widget at registration, not on read.
name the registry-time filter, not the runtime one
wp-build does not expose widget category to PHP yet
hydrate via bootstrap_widget_types() once the filter is hooked
Proposed changes
Add a React Query Devtools widget (
jpa/react-query-dev-tool)to the Premium Analytics dashboard.
It mounts
ReactQueryDevtoolsPanelbound to the dashboard's sharedqueryClientsingleton through the explicitclientprop (not React context), so it inspects the exact cache every other widget reads from.Introduce a server-side widget availability layer:
A new
jetpack_premium_analytics_widget_typesfilter plusget_available_widget_types().This becomes the single point through which widget types are exposed to both the
/jetpack/v4/widget-modulesREST list and the dashboard page import map, so the same policy applies everywhere a widget type reaches the client.Gate the devtools widget to non-production environments by default
Keyed off
wp_get_environment_type().Dropping a type from the availability set removes it from the REST list and the import map, so it can never be rendered or added to a production dashboard.
Replace the previous inline devtools integration
In
packages/data: remove thelazy()/SuspenseNODE_ENVgate from the query client provider and drop the@tanstack/react-query-devtoolsdevDependency.That dependency now lives in the widget's own package.
Widget_Availability_Test).Closes WOOA7S-1611
Related product discussion/links
Does this pull request change what data or activity we track or use?
No. The widget is a developer-only tool that inspects the in-browser React Query cache, and it is gated out of production entirely.
Testing instructions
WP_ENVIRONMENT_TYPEset tolocal,development, orstaging), open the Jetpack Premium Analytics dashboard in wp-admin.jetpack docker wp config set WP_ENVIRONMENT_TYPE developmentTo see the current env
define( 'WP_ENVIRONMENT_TYPE', 'production' );and reload.jetpack docker wp config set WP_ENVIRONMENT_TYPE productionConfirm the widget is gone from the picker and that
GET /wp-json/jetpack/v4/widget-modulesno longer listsjpa/react-query-dev-tool.composer phpunitinprojects/packages/premium-analytics.Screen.Recording.2026-06-26.at.12.02.58.PM.mov